<template lang="html">
  <div class="setting">
    <Loading v-if="loading" />
    <div v-else>
      <mu-form ref="form" :model="info">

        <!-- SEO 设置 -->
        <div v-if="type == 'seo'">
          <mu-form-item prop="keywords" label="keywords" :rules="rules.keywords" label-float>
            <mu-select v-model="info.keywords" chips multiple tags/>
          </mu-form-item>

          <mu-form-item prop="description" label="description" :rules="rules.description" label-float>
            <mu-text-field type="text" v-model="info.description" :max-length="200"></mu-text-field>
          </mu-form-item>
        </div>

        <!-- 世贸简介 -->
        <div v-else-if="type == 'introduction'">
          <mu-form-item prop="intoInfo" label="走进世贸" :rules="rules.intoInfo" label-float>
            <mu-text-field type="text" v-model="info.intoInfo" multi-line :rows="3" :rows-max="10"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="introduction" label="世贸简介" :rules="rules.introduction" label-float>
            <mu-text-field type="text" v-model="info.introduction" multi-line :rows="3" :rows-max="10"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="group" label="集团简介" :rules="rules.group" label-float>
            <mu-text-field type="text" v-model="info.group" multi-line :rows="3" :rows-max="10"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="video_url" label="视频介绍" help-text="视频播放URL" :rules="rules.video_url" label-float>
            <mu-text-field type="text" v-model="info.video_url"></mu-text-field>
          </mu-form-item>
        </div>

        <!-- 区位交通 -->
        <div v-else-if="type == 'traffic'">
          <mu-form-item prop="map" label="地图位置(待定)" :rules="rules.map" label-float>
            <!-- <mu-text-field type="text" v-model="info.map"></mu-text-field> -->
          </mu-form-item>
          <mu-form-item prop="address" label="详细位置" :rules="rules.address" label-float>
            <mu-text-field type="text" v-model="info.address" :max-length="200"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="bus" label="公交" :rules="rules.bus" label-float>
            <mu-text-field type="text" v-model="info.bus" multi-line :rows="2" :rows-max="5"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="metro" label="地铁" :rules="rules.metro" label-float>
            <mu-text-field type="text" v-model="info.metro" multi-line :rows="2" :rows-max="5"></mu-text-field>
          </mu-form-item>
        </div>

        <!-- 关于我们 -->
        <div v-else-if="type == 'aboutUs'">
          <mu-form-item prop="logo" label="logo(待定)" :rules="rules.logo" label-float>
            <!-- <mu-text-field type="text" v-model="info.logo"></mu-text-field> -->
          </mu-form-item>
          <mu-form-item prop="qrcode" label="二维码(待定)" :rules="rules.qrcode" label-float>
            <!-- <mu-text-field type="text" v-model="info.qrcode"></mu-text-field> -->
          </mu-form-item>
          <mu-form-item prop="address" label="地址" :rules="rules.address" label-float>
            <mu-text-field type="text" v-model="info.address" :max-length="200"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="phone" label="电话" :rules="rules.phone" label-float>
            <mu-text-field type="text" v-model="info.phone" :max-length="20"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="email" label="邮箱" :rules="rules.email" label-float>
            <mu-text-field type="text" v-model="info.email"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="fax" label="传真" :rules="rules.fax" label-float>
            <mu-text-field type="text" v-model="info.fax"></mu-text-field>
          </mu-form-item>
        </div>

        <!-- 底部信息 -->
        <div v-else-if="type == 'footInfo'">
          <mu-form-item prop="record_number" label="备案号" :rules="rules.record_number" label-float>
            <mu-text-field type="text" v-model="info.record_number" :max-length="100"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="copyright_start_year" label="版权开始年份" :rules="rules.copyright_start_year" label-float>
            <mu-text-field type="number" v-model="info.copyright_start_year"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="copyright_end_year" label="版权结束年份" :rules="rules.copyright_end_year" label-float>
            <mu-text-field type="number" v-model="info.copyright_end_year"></mu-text-field>
          </mu-form-item>
        </div>

        <mu-form-item>
          <mu-button color="primary" @click="submit">保存</mu-button>
        </mu-form-item>
      </mu-form>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      type: null,
      url: '',
      info: {},
      rules: {},
    }
  },
  watch: {
    '$route': 'fetchData',
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      let type = this.$route.params.type

      this.loading = true
      this.info = {}
      this.url = '/setting/' + type
      this.type = type
      this.get()
    },
    get() {
      flyio.get(this.url).then((res) => {
        if (!Array.isArray(res)) {
          this.info = res
        }
        this.loading = false
      })
    },
    submit() {
      let info = this.info
      this.$Toast('正在保存')
      flyio.post(this.url, {
        info,
      }).then((res) => {
        this.$Toast('保存成功')
      })
    },
  },
}
</script>

<style lang="css" scoped>
</style>
